<template>
  <div class="sidebar">
    <el-menu :default-active="onRoutes"
             class="el-menu-vertical-demo"
             unique-opened
             router
             @open="handleopen"
             @select="handleselect"
    >
      <template v-for="item in items">
        <template v-if="item.subs">
          <el-submenu :index="item.index">
            <template slot="title"><i :class="item.icon"></i>{{ item.title }}</template>
            <el-menu-item v-for="(subItem,i) in item.subs" :key="i" :index="subItem.index">{{ subItem.title }}
            </el-menu-item>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.index">
            <i :class="item.icon"></i>{{ item.title }}
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        items: [
          {
            icon: 'el-icon-edit',
            index: 'home',
            title: '首页'
          },
          {
            icon: 'el-icon-mobile-phone',
            index: 'houseList',
            title: '房源管理',
            subs: [
              {
                index: 'houseList',
                title: '房源列表'
              }
            ]
          },
          {
            icon: 'el-icon-mobile-phone',
            index: 'userCenter',
            title: '用户管理',
            subs: [
              {
                index: 'modifyPassword',
                title: '修改密码'
              }
            ]
          }
        ]
      }
    },
    computed: {
      onRoutes() {
        // console.log(this.$route.path);
        return this.$route.path.replace('/', '');
      }
    },
    methods:{
      handleopen(key, keyPath){
        // console.log(key);
        // console.log(keyPath);
      },
      handleselect(key, keyPath){
        //console.log(key);
        this.$router.push('/'+key);
        //console.log(keyPath);
      }
    }
  }
</script>

<style scoped>
  .sidebar {
    display: block;
    position: absolute;
    width: 250px;
    left: 0;
    top: 70px;
    bottom: 0;
    background: #2E363F;
  }

  .sidebar > ul {
    height: 100%;
  }
</style>
